import React from "react";

class Hello extends React.Component {
  show() {
    alert("Hello Hello");
  }

  render() {
    return (
      <div>
        <h2>Hello</h2>
      </div>
    );
  }
}

export default class App extends React.Component {
  fn1() {
    console.log(this.h1Ref);
  }

  fn2() {
    console.log(this.helloRef);

    this.helloRef.show();
  }
  render() {
    return (
      <div>
        <h1 ref={(el) => (this.h1Ref = el)}>哈喽 ref</h1>
        <Hello ref={(el) => (this.helloRef = el)} />
        <hr />
        <button onClick={() => this.fn1()}>点我1</button>
        <button onClick={() => this.fn2()}>点我2</button>
      </div>
    );
  }
}
